<template>
  <div class="detail-container">
    <!-- 审批情况卡片 -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">审批情况</span>
      </div>
      <div class="card-content">
        <div class="document-list">
          <div class="document-item" v-for="(doc, index) in approvalFiles" :key="index">
            <div class="document-icon" :class="getDocumentClass(doc.type)">
              <span class="icon-text">{{getDocumentIcon(doc.type)}}</span>
            </div>
            <div class="document-info">
              <span class="document-name">{{doc.name}}</span>
              <span class="document-date">上传时间：{{doc.date}}</span>
            </div>
            <div class="document-action">
              <span class="action-text">查看</span>
            </div>
          </div>
          
          <div class="empty-tip" v-if="approvalFiles.length === 0">
            <span class="empty-text">暂无审批文件</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片列表卡片 -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">相关图片</span>
      </div>
      <div class="card-content">
        <div class="image-grid">
          <div class="image-item" v-for="(img, index) in approvalImages" :key="index" @click="previewImage(img.url)">
            <img class="grid-image" :src="img.url" alt="项目图片">
            <span class="image-name">{{img.name}}</span>
          </div>
          
          <div class="empty-tip" v-if="approvalImages.length === 0">
            <span class="empty-text">暂无相关图片</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 模拟数据
const approvalFiles = ref([
  {
    name: '建设用地规划许可证',
    type: 'pdf',
    date: '2025-02-20'
  },
  {
    name: '建设工程规划许可证',
    type: 'pdf',
    date: '2025-02-18'
  },
  {
    name: '施工许可证',
    type: 'doc',
    date: '2025-02-15'
  }
])

const approvalImages = ref([
  {
    name: '项目效果图',
    url: '/src/assets/images/projects/cultural-creative.svg'
  },
  {
    name: '规划图',
    url: '/src/assets/images/projects/swiper1.svg'
  },
  {
    name: '现场照片',
    url: '/src/assets/images/projects/swiper2.svg'
  },
  {
    name: '平面图',
    url: '/src/assets/images/projects/swiper3.svg'
  }
])

// 获取文档图标
const getDocumentIcon = (type) => {
  switch(type) {
    case 'pdf':
      return 'PDF'
    case 'doc':
      return 'DOC'
    case 'img':
      return 'IMG'
    default:
      return 'FILE'
  }
}

// 获取文档类型样式
const getDocumentClass = (type) => {
  return {
    'icon-pdf': type === 'pdf',
    'icon-doc': type === 'doc',
    'icon-img': type === 'img'
  }
}

// 预览图片
const previewImage = (url) => {
  // 在实际应用中，这里应该调用图片预览组件
  window.open(url, '_blank')
}

// 获取审批文件数据
const getApprovalFiles = (id) => {
  // 实际项目中，这里应该调用API获取详情数据
  console.log('获取审批文件，ID:', id)
  // 模拟API调用
  // axios.get(`${config.getUrl('project_approval')}?id=${id}`)
  //   .then(response => {
  //     if (response.data.success) {
  //       approvalFiles.value = response.data.result.files
  //       approvalImages.value = response.data.result.images
  //     }
  //   })
  //   .catch(error => {
  //     console.error('获取审批文件失败:', error)
  //   })
}

onMounted(() => {
  const id = route.params.id
  
  if (id) {
    getApprovalFiles(id)
  }
})
</script>

<style scoped>
/* 全局变量 */
:root {
  --primary-color: #2D5BFF;
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --danger-color: #EF4444;
  --background-color: #F8FAFC;
  --card-color: #FFFFFF;
  --text-primary: #1A1F36;
  --text-secondary: #4E5D78;
  --text-tertiary: #8A94A6;
  --border-radius: 8px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  --transition: all 0.2s ease;
}

/* 基础样式 */
.detail-container {
  min-height: 100vh;
  background: var(--background-color);
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 卡片样式 */
.card {
  background: var(--card-color);
  margin-bottom: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-content {
  padding: 20px;
}

/* 文档列表 */
.document-list .document-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.document-list .document-item:last-child {
  border-bottom: none;
}

.document-icon {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.document-icon .icon-text {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

.document-icon.icon-pdf {
  background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%);
}

.document-icon.icon-doc {
  background: linear-gradient(135deg, #2979FF 0%, #2962FF 100%);
}

.document-icon.icon-img {
  background: linear-gradient(135deg, #00C853 0%, #00B248 100%);
}

.document-info {
  flex: 1;
}

.document-info .document-name {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 5px;
  display: block;
}

.document-info .document-date {
  font-size: 14px;
  color: var(--text-tertiary);
}

.document-action .action-text {
  font-size: 16px;
  color: var(--primary-color);
  padding: 8px 15px;
  cursor: pointer;
}

.empty-tip {
  padding: 40px 0;
  text-align: center;
}

.empty-tip .empty-text {
  font-size: 16px;
  color: var(--text-tertiary);
}

/* 图片网格 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.image-item {
  width: calc(50% - 20px);
  margin: 10px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-item:hover {
  transform: translateY(-5px);
}

.grid-image {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.image-name {
  font-size: 14px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .image-item {
    width: calc(33.333% - 20px);
  }
}

@media (min-width: 1024px) {
  .image-item {
    width: calc(25% - 20px);
  }
}
</style>
